import React, { Suspense, lazy } from "react";
import { Routes, Route } from "react-router-dom";

// 懒加载页面组件
const Page1 = lazy(() => import("../pages/Page1"));
const Page2 = lazy(() => import("../pages/Page2"));

// 加载中组件
const Loading: React.FC = () => (
  <div
    style={{
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
      width: "100vw",
      height: "100vh",
      background: "#f5f5f5",
    }}
  >
    <div
      style={{
        width: "50px",
        height: "50px",
        border: "5px solid rgba(0, 0, 0, 0.1)",
        borderTopColor: "rgba(10, 10, 10, 0.8)",
        borderRadius: "50%",
        animation: "spin 1s linear infinite",
      }}
    ></div>

    <h4 style={{ textAlign: "center", marginTop: "5px" }}>Loading...</h4>

    <style>{`
              @keyframes spin {
                to { transform: rotate(360deg); }
              }
            `}</style>
  </div>
);

// 路由配置
const AppRoutes: React.FC = () => {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/" element={<Page1 />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        {/* 404页面 */}
        <Route
          path="*"
          element={
            <div style={{ padding: "20px", textAlign: "center" }}>
              <h1>404</h1>
              <p>页面未找到</p>
            </div>
          }
        />
      </Routes>
    </Suspense>
  );
};

export default AppRoutes;
